{
 
    const htmlcam = {  
        elementTemplate : ` 
                    <label>{{title}}</label>
                    <div class="panel panel-default" :style="{width: '320px'}"  data-replace='htmlcam'>
                          <div class="panel-heading">这里是一个摄像头的显示区域</div>
                          <div class="panel-body">
                              <h1>这里是一个摄像头的显示区域</h1>
                          </div>
                    </div>
        `,
        prototypeTemplate : ` 
                    <div class="form-group">
                        <label >请输入字段名(唯一):</label>
                        <input type="text" class="form-control input-sm" v-model="name">
                    </div>
                    <div class="form-group">
                        <label >摄像头的标题:</label>
                        <input type="text" class="form-control input-sm" v-model="title">
                    </div>
        `,

        realTemplate : `
                    <label>{{title}}</label>
                    <div :id="name"></div>
        `,

        _constructor : function () {
            return { 
                data: {  
                    title : "摄像头：",
                    name : "htmlcam1"
                },

                mounted : function () { 
                    if (typeof $ != 'undefined') {
                        let _this = this; 
                        $(function() {
                            Webcam.set({
                                width: 320,
                                height: 240,
                                image_format: 'jpeg',
                                jpeg_quality: 90
                            });
                            Webcam.attach('#' + _this.name); 
                        });
                    }
                },

                methods: { 
                    getValue : function () {
                        let imgBase64 = '';
                        Webcam.snap(function(data_uri) {
                            imgBase64 = data_uri;
                        });
                        return imgBase64;
                    },
                    
                    getField : function () {
                        return this.name;
                    }
                }
            }
        }  
    }

    if ( window.TEMPLATE && !window.TEMPLATE.htmlcam ) {
        window.TEMPLATE.htmlcam = htmlcam
    }
}